﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/layx.min.css" media="all">
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <style>
        #editor {
            width: 600px;
            height: 300px;
        }
    </style>
    <title>clibalgserver</title>
</head>

<body>
    <div class="layui-container" id="app" style="background-color: white">
        <div class="layui-row">
            <div class="layui-col-xs8">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                    <legend>在线编译</legend>
                </fieldset>

                <form class="layui-form" action="">
                    <div class="layui-form-item">
                        <label class="layui-form-label">链接</label>
                        <div class="layui-input-block">
                            <a href="alg.html">算法可视化</a>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">输入代码</label>
                        <div class="layui-input-block">
                            <div id="editor"></div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">输出结果</label>
                        <div class="layui-input-block">
                            <textarea placeholder="输出结果" readonly class="layui-textarea" v-model="toutput"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button type="submit" class="layui-btn" @click="compile" onclick="return false;">发送</button>
                            <button type="reset" class="layui-btn layui-btn-primary" onclick="return false;">重置</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="js/jquery.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/layx.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/vue.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="ace/ace.js" charset="utf-8"></script>
    <script type="text/javascript" src="ace/ext-language_tools.js" charset="utf-8"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            var app = new Vue({
                el: '#app',
                data: {
                    toutput: ""
                },
                methods: {
                    compile: function() {
                        layx.load('load', '正在编译中……');
                        var _this = this;
                        $.ajax('/api/compile', {
                            method: 'POST',
                            contentType: 'application/json;charset=utf-8',
                            data: JSON.stringify({
                                text: editor.getValue()
                            }),
                            success: function(d) {
                                layx.destroy('load');
                                var data = JSON.parse(d);
                                if (data.code == 200)
                                    _this.toutput = data.text;
                                else
                                    _this.toutput = data.text;
                            }
                        }).error(function(e) {
                            layx.destroy('load');
                            _this.toutput = e.responseText;
                        });
                    },
                }
            });
            var editor = ace.edit("editor");
            ace.require("ace/ext/language_tools");
            editor.setTheme("ace/theme/chrome");
            editor.session.setMode("ace/mode/c_cpp");
            editor.setShowPrintMargin(true);
            editor.setFontSize(18);
            editor.setOptions({
                enableBasicAutocompletion: true,
                enableSnippets: true,
                enableLiveAutocompletion: true
            });
            $.get("example/test.cpp", function(d) {
                editor.setValue(d);
            }).error(function() {
                editor.setValue("// 加载出现错误");
            });
        });
    </script>
</body>

</html>